import React from 'react';
import {RouterProvider, createHashRouter} from 'react-router-dom';
import Layout from '../layout';
import {Spinner} from 'amis';

const Login = React.lazy(() => import('pages/user/Login'));
const Home = React.lazy(() => import('../pages/Home'));
const Shop = React.lazy(() => import('../pages/ContainerCenter/Shop'));

const routes = createHashRouter([
  {
    path: '/user',
    element: <Layout />,
    children: [
      {
        path: 'login',
        element: <Login />
      }
    ]
  },
  {
    path: '/',
    element: <Layout type="basic" />,
    children: [
      {
        path: 'home',
        element: <Layout />,
        children: [
          {
            path: 'index',
            element: <Home />
          }
        ]
      },
      {
        path: 'container',
        element: <Layout />,
        children: [
          {
            path: 'shop',
            element: <Layout />,
            children: [
              {
                path: 'manager',
                element: <Shop />
              }
            ]
          }
        ]
      }
    ]
  }
]);

export default function Route() {
  return (
    <React.Suspense fallback={<Spinner overlay className="m-t-lg" size="lg" />}>
      <RouterProvider router={routes}></RouterProvider>;
    </React.Suspense>
  );
}
